<script setup lang='ts' name="growth-rule">
import { getBussinessUnits, getObjectTree, getRuleInfo, updateGrowthRule } from '@fl/api/anjutong'
import { ElButton, ElCard, ElCascader, ElCheckbox, ElCol, ElInput, ElOption, ElRadio, ElRadioGroup, ElRow, ElSelect } from 'element-plus'
import { ref } from 'vue'

const form = ref<any>({
    basicValid: 666, // 成长值有效期
    // id: 0,
    isNew: 0,
    isNewBuy: 0,
    isTrade: 0,
    newBuyValid: 10,
    newRatio: 1,
    newSet: '',
    tradeBuy: 10,
    tradeGrowth: 1,
    tradeSet: [],
})
const props = { multiple: true }
const projectList = ref<any>([])
const basicGrowth = ref('')

const ageLimitNew = [
    {
        label: '当年',
        value: 0,
    },
    {
        label: 'T + 1',
        value: 1,
    },
    {
        label: 'T + 2',
        value: 2,
    },
    {
        label: 'T + 10',
        value: 10,
    },
]

const ageLimit = [
    {
        label: '当年',
        value: 1,
    },
    {
        label: 'T + 1',
        value: 2,
    },
    {
        label: 'T + 2',
        value: 3,
    },
    {
        label: 'T + 3',
        value: 4,
    },
]

const checked = ref<any>([])

const options = ref<any>([])

async function doSave() {
    const { basicValid, newSet, tradeSet } = form.value
    if (basicValid === 999) {
        ElMessage({ message: '请选择基础设置', type: 'warning' })
        return
    }

    if (basicValid === 666 && basicGrowth.value === '') {
        ElMessage({ message: '请选择期限', type: 'warning' })
        return
    }
    const params = {
        ...form.value,
    }
    const item: string[] = ['isNew', 'isNewBuy', 'isTrade']
    item.forEach((v: any) => {
        if (checked.value.includes(v))
            params[v] = 1 // 1=启用，0=禁用
        else
            params[v] = 0
    })

    params.newSet = newSet.length && params.isNew === 1 ? JSON.stringify(newSet) : ''
    params.tradeSet = tradeSet.length && params.isTrade === 1 ? JSON.stringify(tradeSet) : ''

    if (basicValid === 666)
        params.basicValid = basicGrowth.value

    updateGrowthRule(params).then((res: any) => {
        if (res) {
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
        }
    })
}

// 查询详情回显
async function getDetail() {
    getRuleInfo({}).then((res: any) => {
        const { isNew, isNewBuy, isTrade } = res
        let basicValid = 0
        // 基础设置回显
        if (res.basicValid !== 0) {
            basicGrowth.value = res.basicValid
            basicValid = 666
        }

        checked.value = []
        // 运营设置多选回显
        if (isNew > 0)
            checked.value.push('isNew')

        if (isTrade > 0)
            checked.value.push('isTrade')

        if (isNewBuy > 0)
            checked.value.push('isNewBuy')

        // 多选值回显
        const newSet = res.newSet ? JSON.parse(res.newSet) : []
        const tradeSet = res.tradeSet ? JSON.parse(res.tradeSet) : []

        form.value = {
            ...form.value,
            ...res,
            basicValid,
            newSet,
            resource: res.newSet ? '2' : '1',
            tradeSet,
        }
    })
}

function basicChange(value: any) {
    if (value === 0)
        basicGrowth.value = ''
}
function resourceChange(val: any, key: string) {
    if (val === '1')
        form.value[key] = []
}

function getDicts() {
    // 部分项目下拉值 保障房: '2'  好房: '1',
    getObjectTree({ treeType: '1' }).then((res) => {
        projectList.value = res
    }).catch(() => {
        projectList.value = []
    })

    // 查询适用范围
    getBussinessUnits({}).then((res: any) => {
        options.value = res ?? []
    })
}

async function init() {
    getDicts()
    getDetail()
}
init()
</script>

<template>
    <ElCard mb-20>
        <ElRow mb-20
               text-16
               fw-700
        >
            基础设置
        </ElRow>

        <ElRow pl-20>
            <ElCol class="radio-sty"
                   :span="24"
            >
                <ElRadio v-model="form.basicValid"
                         :value="0"
                         @change="basicChange"
                />
                永久有效
            </ElCol>

            <ElCol class="radio-sty"
                   :span="24"
            >
                <ElRadio v-model="form.basicValid"
                         :value="666"
                />
                自获得成长值起，
                <ElSelect v-model="basicGrowth"
                          placeholder="请选择"
                          :disabled="form.basicValid !== 666"
                          style="width: 120px;"
                >
                    <ElOption v-for="item in ageLimit"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                    />
                </ElSelect>

                &nbsp; 年底清零
            </ElCol>

            <div class="tips">
                例如当年获得成长值，则统一在（T+N）年12月31日失效
            </div>
        </ElRow>
    </ElCard>

    <ElCard>
        <ElRow mb-20
               text-16
               fw-700
        >
            运营设置
        </ElRow>

        <ElRow>
            <ElCol :span="24"
                   mb-20
                   class="radio-sty"
            >
                <ElCheckbox v-model="checked"
                            value="isTrade"
                />

                平台交易，每消费&nbsp;

                <ElInput v-model="form.tradeBuy"
                         style="width: 120px;"
                />

                元，获成长值&nbsp;
                <ElInput v-model="form.tradeGrowth"
                         style="width: 120px;"
                />

                ，可在&nbsp;
                <ElCascader v-model="form.tradeSet"
                            :props="props"
                            style="width: 250px;"
                            :options="options"
                            collapse-tags
                            collapse-tags-tooltip
                            clearable
                />
                适用
            </ElCol>

            <ElCol :span="24"
                   mb-20
                   class="radio-sty"
            >
                <ElCheckbox v-model="checked"
                            value="isNew"
                />

                购新房，按房款&nbsp;

                <ElInput v-model="form.newRatio"
                         style="width: 120px;"
                />
                &nbsp;
                ‰，获成长值，可在 &nbsp;
                <ElRadioGroup v-model="form.resource"
                              @change="resourceChange($event, 'newSet')"
                >
                    <ElRadio value="1">
                        全部项目
                        &nbsp;&nbsp;
                    </ElRadio>

                    <ElRadio value="2">
                        部分项目
                    </ElRadio>
                </ElRadioGroup>
                &nbsp;&nbsp;
                <ElCascader v-model="form.newSet"
                            style="width: 400px;"
                            :options="projectList"
                            :props="props"
                            :disabled="form.resource !== '2'"
                            collapse-tags
                            collapse-tags-tooltip
                            clearable
                />
                适用&nbsp;
            </ElCol>

            <ElCol :span="24"
                   mb-20
                   class="radio-sty"
            >
                <ElCheckbox v-model="checked"
                            value="isNewBuy"
                />
                自购新房获得成长值起，
                <ElSelect v-model="form.newBuyValid"
                          placeholder="请选择"
                          style="width: 120px;"
                >
                    <ElOption v-for="item in ageLimitNew"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                    />
                </ElSelect>
                &nbsp; 年底清零
            </ElCol>
        </ElRow>

        <ElRow mt-24>
            <ElButton type="primary"
                      @click="doSave"
            >
                提交
            </ElButton>
        </ElRow>
    </ElCard>
</template>

<style lang="less" scoped>
.radio-sty {
    display: flex;
    align-items: center;

    .el-radio {
        margin-right: 0;
    }
}

.tips {
    color: rgb(190 190 190 / 100%);
    font-size: 14px;
    font-family: SourceHanSansSC;
    font-weight: 400;
    line-height: 20px;
}

.flex-column {
    display: flex;
    flex-direction: column;
    align-items: normal;
}
</style>
